<template>
    <div>
        <!-- 移动端 -->
        <div class=" headerbig" v-if="ismobile">
            <div class="header_mobile ">
                <div class="headerbox">
                    <img class="logo" src="../../assets/images/zi-yuan-3-208.png" @click="gohome" />
                    <div class="right" @click="shows = !shows">
                        <span class="iconfont icon-gengduo gengduo"></span>
                    </div>
                </div>
            </div>
            <div class="lfex" v-show="shows">
                <div class="neibu">
                    <img class="neibulogo" src="../../assets/images/zi-yuan-3-208.png" />
                    <div class="neiburight" @click="shows = !shows">
                        <!-- <img src="../../assets/images/cai-dan.svg" /> -->
                        <span class="iconfont icon-gengduo gengduo"></span>
                    </div>
                </div>
                <div class="ulist">
                    <div class="" v-for="(item, index) in navlist" :key="index" @click="gopage(index)"
                        :class="index == pageindex ? 'activeword' : ''">
                        {{
                            item.name }}
                        <!-- <span class="iconfont icon-xiala xiala"></span> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- pc端 -->
        <div class=" headerbig_pc ispc" v-if="!ismobile">
            <div class="header_pc ">
                <div class="headerbox_pc">
                    <img class="logo shouzhi" src="../../assets/images/zi-yuan-3-468.png" @click="gohome" />
                    <div class="listword">
                        <div class="shouzhi" v-for="(item, index) in navlist" :key="index" @click="gopage(index)"
                            :class="index == pageindex ? 'activeword' : ''">{{
                                item.name }}
                            <P class="bottomp">{{ item.eng }}</P>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'headers',
    data() {
        return {
            shows: false,
            ismobile: false,
            navlist: [
                { name: "首页", eng: "HOME", url: "/", class: "icon-shouye" },
                { name: "案例展示", eng: "ANLI", url: "/anli", class: "icon-yidongduan-anlizhanshi" },
                { name: "防伪系统", eng: "XITONG", url: "/anti_fake", class: "icon-fangweixitong" },
                { name: "合作商家", eng: "HEZUO", url: "/business_partner", class: "icon-hezuoshangjia1" },
                { name: "AI工具集", eng: "AI", url: "/aitool", class: "icon-suoyou" },
                { name: "关于我们", eng: "CONTACT", url: "/aboutus", class: "icon-guanyuwomen" }
            ]
        }
    },
    props: {
        pageindex: {
            default: null
        }
    },
    mounted() {
        console.log(this.$route.path)
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });
    },
    methods: {

        gohome(index) {
            if ("/" == (this.$route.path)) {
                return
            }
            this.$router.push({ path: "/" });
        },
        gopage(index) {
            this.shows = false
            if (this.navlist[index].url == (this.$route.path)) {
                return
            }
            this.$router.push({ path: this.navlist[index].url });
        },
    },
}
</script>
<style lang="scss" scoped>
.gengduo {
    font-size: 2rem;
    margin-right: 0.7rem;
}

.neibu {

    .neibulogo {
        width: 38%;
        float: left;
    }

    .neiburight {
        width: 7%;
        float: right;
    }
}

.bottomp {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    text-align: center;
}

.activeword {
    color: #009aff;

    span {

        color: #009aff !important;
    }
}

.xiala {
    font-size: 0.8rem !important;
}

.headerbig {

    // height: 69px;
    width: 100%;
    background: white;
    z-index: 99999;
    position: relative;
    // position: fixed;
    top: 0;

    // left: 50%;
    // transform: translateX(-50%);
}

.lfex {
    position: fixed;
    width: 100%;
    font-size: 1rem;
    top: 0;
    background: white;
    z-index: 100000;
    padding-left: 1.7rem;
    padding-top: 1rem;
    padding-right: 0.5rem;
}

.ulist {
    clear: both;
    padding-top: 1rem;
    overflow: hidden;
    height: 100vh;
    line-height: 2.3rem;
    // padding-left: 1.7rem;
    // padding-top: 1rem;
    // padding-right: 0.5rem;
    color: #333;
    text-align: center;

    >div {
        border-bottom: solid 1px #f1f3f5;
    }

    span {
        color: #333;
        font-size: 1.5rem;
    }
}

.headerbig_pc {
    height: 100px;
    width: 100%;
    background: white;
    z-index: 9999;
    position: fixed;
    top: 0;
    padding-top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.header_mobile {
    width: 100%;
    box-sizing: border-box;
    padding-left: 1.7rem;
    padding-top: 1rem;
    padding-right: 0.5rem;
    margin-bottom: 0.3rem;

    .headerbox {
        overflow: hidden;
    }

    .logo {
        width: 38%;
        float: left;
    }

    .right {
        width: 7%;
        float: right;
    }
}

.header_pc {
    max-width: 1300px;
    margin: 0 auto;
    // padding: 20px;



    .headerbox_pc {
        width: 90%;
        margin: 0 auto;
        margin-top: 0.4rem;
        ;

        .listword {
            float: right;

            >div {
                float: left;
                font-size: 1rem !important;
                margin: 8px 13px;
                // font-size: 2vw;
                // margin: 15px 13px;
            }

            >div:hover {
                color: #009aff;
            }

            // >div {
            //     float: left;
            //     font-size: 20px;
            //     margin: 15px 20px;
            // }
        }


        .logo {
            width: 12rem;
        }
    }

}




@media (max-width: 1120px) {
    .pc {
        .logo {
            width: 200px !important;
        }
    }

    .listword {
        >div {
            font-size: 21px !important;
            margin: 15px 11px;
        }
    }

}

@media (max-width: 1000px) {

    // .listword {
    //     >div {
    //         float: left;
    //         font-size: 13px;
    //         margin: 15px 15px;
    //     }
    // }
    .header_pc {
        .logo {
            width: 180px !important;
        }
    }

    .listword {
        >div {
            font-size: 19px !important;
            margin: 15px 5px;
        }
    }
}

/deep/.van-popup__close-icon {
    font-size: 3rem;
}
</style>